/*
    1.页面一加载,查询数据
    2.添加学员的三级联动    
        2.1当添加学员点开,省级发请求,省级的change事件里,加载市,市的change里面加载县
        2.2利用formData对象收集数据,非空判断,发送请求,响应数据
 */


// 1.页面一加载,查询数据
const getStudent = () => {
    axios({
        url: '/student/list',
        method: 'get',
    }).then(res => {
        //成功回调
        //渲染数据
        renderData(res.data.data)
    })
}
/* 封装渲染函数 */
const renderData = arr => {
    document.querySelector('tbody').innerHTML = arr.map(item => `
    <tr>
        <th scope="row">${item.id}</th>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.sex}</td>
        <td>${item.group}</td>
        <td>${item.phone}</td>
        <td>${item.salary}</td>
        <td>${item.truesalary}</td>
        <td>${item.province + item.city + item.county}</td>
        <td>
        <button type="button" class="btn btn-primary btn-sm" data-id=${item.id}>修改</button>
        <button type="button" class="btn btn-danger btn-sm" data-stu_id="${item.id}">删除</button>
        </td>
    </tr>
    `).join('')
}

//调用函数
getStudent()


//添加学员
document.querySelector('.btnAddStu').addEventListener('click', function (e) {
    //改文字
    document.querySelector('.addModalLabel').innerText = '录入新成员'
    document.querySelector('.btnAddStudent').innerText = '确认添加'
    //弹出模态框  显示:show  隐藏:hide
    $('#addModal').modal('show')
    //加载省
    getProvince()
    document.querySelector('form').reset()
})

//2.1地区的三级联动
//请求省的函数
const getProvince = () => {
    //清除市和县的选择
    document.querySelector('[name="city"]').innerHTML = `<option value="">--市--</option>`
    document.querySelector('[name="county"]').innerHTML = `<option value="">--县--</option>`
    //发送请求
    axios({
        url: '/geo/province',
        method: 'get',
    }).then(res => {
        //成功回调
        //渲染数据
        document.querySelector('[name="province"]').innerHTML = `<option value="">--省--</option>` + res.data.map(item => `
            <option value="${item}">${item}</option>
        `).join('')
    })
}

//改变省 请求市的数据
document.querySelector('[name="province"]').addEventListener('change', function () {
    document.querySelector('[name="county"]').innerHTML = `<option value="">--县--</option>`
    //发送请求
    axios({
        url: '/geo/city',
        method: 'get',
        params: { pname: this.value }
    }).then(res => {
        //成功回调
        //渲染数据
        document.querySelector('[name="city"]').innerHTML = `<option value="">--市--</option>` + res.data.map(item => `
            <option value="${item}">${item}</option>
        `).join('')
    })
})

//改变市,请求县的数据
document.querySelector('[name="city"]').addEventListener('change', function () {
    //发送请求
    axios({
        url: '/geo/county',
        method: 'get',
        params: {
            pname: document.querySelector('[name="province"]').value,
            cname: this.value
        }
    }).then(res => {
        //成功回调
        //渲染数据
        document.querySelector('[name="county"]').innerHTML = `<option value="">--县--</option>` + res.data.map(item => `
            <option value="${item}">${item}</option>
        `).join('')
    })
})

//添加学员
document.querySelector('.btnAddStudent').addEventListener('click', function (e) {

    // 2.2利用formData对象收集数据,非空判断,发送请求,响应数据
    //阻止默认事件
    e.preventDefault()
    //formData为文件上传使用,必须把它转化成Object
    const fd = new FormData(document.querySelector('form'))
    const data = {}
    fd.forEach((item, index) => {
        data[index] = item
    })
    let config = {
        url: '/student/add',
        method: 'post',
        data
    }
    //判断点击的是确认添加还是确认修改
    if (document.querySelector('.btnAddStudent').innerText === '确认修改') {
        config = {
            url: '/student/update',
            method: 'put',
            data: {
                id: this.dataset.id,
                ...data
            }
        }
    }
    // 发送ajax
    axios(config).then(res => {
        //成功回调
        if (res.data.code === 0) {
            //添加成功
            Toast.success(res.data.message)
            //隐藏模态框  显示:show  隐藏:hide
            $('#addModal').modal('hide')
            //刷新列表
            getStudent()
        }
    }).catch(err => {
        Toast.fail(err.response.data.message);
    })
})
// 删除数据
//利用事件委托删除,获取id发送ajax
document.querySelector('tbody').addEventListener('click', function (e) {
    //判断
    if (e.target.classList.contains('btn-danger')) {
        const id = e.target.dataset.stu_id
        axios({
            url: '/student/delete',
            method: 'delete',
            params: { id }
        }).then(res => {
            //成功回调
            if (res.data.code === 0) {
                //刷新数据
                getStudent()
                Toast.success(res.data.message)
            } else {
                Toast.fail(res.data.message)
            }
        })
    }
})

//修改学员
document.querySelector('tbody').addEventListener('click', function (e) {
    //阻止默认事件
    e.preventDefault()
    // 弹出模态框,获取id发送请求,把数据渲染到form表单,
    if (e.target.classList.contains('btn-primary')) {
        //改文字
        document.querySelector('.addModalLabel').innerText = '修改成员'
        document.querySelector('.btnAddStudent').innerText = '确认修改'
        //把点击的id传给确认修改
        document.querySelector('.btnAddStudent').dataset.id = e.target.dataset.id
        axios({
            url: '/student/one',
            method: 'get',
            params: { id: e.target.dataset.id }
        }).then(res => {
            //成功回调
            console.log(res)
            const data = res.data.data
            //弹出模态框  显示:show  隐藏:hide
            $('#addModal').modal('show')
            //加载省
            getProvince()
            document.querySelector('[name="name"]').value = data.name
            document.querySelector('[name="age"]').value = data.age
            if (data.sex === '男') {
                document.querySelectorAll('[name="sex"]')[0].checked = true
            } else {
                document.querySelectorAll('[name="sex"]')[1].checked = true
            }
            document.querySelector('[name="group"]').value = data.group
            document.querySelector('[name="phone"]').value = data.phone
            document.querySelector('[name="salary"]').value = data.salary
            document.querySelector('[name="truesalary"]').value = data.truesalary
            document.querySelector('[name="province"]').value = data.province
            document.querySelector('[name="city"]').innerHTML = `<option>${data.city}</option>`
            document.querySelector('[name="county"]').innerHTML = `<option>${data.county}</option>`
        })
    }
})